let path = require('path')   // 相对路径变绝对路径
let WebpackDevServer = require('webpack-dev-server')   // 相对路径变绝对路径
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  mode: 'production', // 模式 默认 production development
  entry: './src/index',    // 入口
  watch: true,
  watchOptions: {
    poll: 1000,              // 每秒监听1000次
    aggregateTimeout: 300,   // 防抖，当第一个文件更改，会在重新构建前增加延迟
    ignored: /node_modules/  // 对于某些系统，监听大量文件系统会导致大量的 CPU 或内存占用。这个选项可以排除一些巨大的文件夹，
  },
  output: {
    filename: 'bundle.[hash:8].js',   // hash: 8只显示8位
    path: path.resolve(__dirname, 'dist'),
    publicPath: ''  // // 给所有打包文件引入时加前缀，包括css，js，img，如果只想处理图片可以单独在url-loader配置中加publicPath
  },
  devServer: {
    port: 3000,
    progress: true,          // 滚动条
    contentBase: './dist',  // 起服务的地址
    open: true,              // 自动打开浏览器
    compress: true         // gzip压缩
  },
  plugins: [ // 放着所有webpack插件
    new HtmlWebpackPlugin({ // 用于使用模板打包时生成index.html文件，并且在run dev时会将模板文件也打包到内存中
      template: './src/index.html', // 模板文件
      filename: 'index.html', // 打包后生成文件
      hash: true, // 添加hash值解决缓存问题
      minify: { // 对打包的html模板进行压缩
        removeAttributeQuotes: true, // 删除属性双引号
        collapseWhitespace: true // 折叠空行变成一行
      }
    })
  ],
  module: { //这个节点 用于配置 所有第三方模块加载器
    rules: [ //所有第三方模块的 匹配规则
      //use 代表匹配的文件 使用对应的loader进行处理
      // css-loader   作用：用来解析@import这种语法
      // style-loader 作用：把 css 插入到head标签中
      // loader的执行顺序： 默认是从右向左（从下向上）
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //匹配所有已.css结尾的文件
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.(png|gif|bmp|jpg)$/, use: 'url-loader?limit=5000' },
      {
        /**
         * 语法检查eslint-loader eslint
         * 只检查源代码
         * 设置检查规则：
         * package.json中eslintConfig中设置
         * airbnb --> eslint-config-airbnb-base eslint eslint-plugin-import
         *  npm i eslint-loader  eslint-config-airbnb-base eslint eslint-plugin-import -D
         */
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      { test: /\.(js|jsx)$/, exclude: /node_modules/, use: 'babel-loader' },

    ]
  }

}